@import 'react-flow-renderer/dist/style.css';
@import 'react-flow-renderer/dist/theme-default.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-gray-100;
}

.workflow-container {
  @apply flex flex-col h-full w-full;
}

.workflow-main-area {
  @apply flex flex-1;
}

.reactflow-canvas-wrapper {
  @apply flex-1 h-full;
}

.sidebar {
  @apply w-64 bg-white border-r border-gray-200 p-4 shadow-md overflow-y-auto;
}

.node-type-item {
  @apply p-3 border border-gray-300 rounded-md mb-2 bg-white cursor-grab text-sm text-gray-700 flex items-center gap-2;
  transition: background-color 0.2s ease;
}

.node-type-item:hover {
  @apply bg-gray-100;
}

.node-type-item.node-type-start { @apply bg-green-50 border-green-200; }
.node-type-item.node-type-llm { @apply bg-blue-50 border-blue-200; }
.node-type-item.node-type-branch { @apply bg-red-50 border-red-200; }
.node-type-item.node-type-code { @apply bg-yellow-50 border-yellow-200; }
.node-type-item.node-type-http { @apply bg-teal-50 border-teal-200; }
.node-type-item.node-type-knowledge_node { @apply bg-purple-50 border-purple-200; }
.node-type-item.node-type-end { @apply bg-gray-50 border-gray-200; }

.workflow-footer-actions {
  @apply p-4 bg-gray-50 border-t border-gray-200;
}

.run-actions {
  @apply flex gap-3 justify-end mb-3;
}

.run-actions .status-message {
  @apply mr-auto font-semibold text-sm;
}

.run-actions .status-message.success { @apply text-green-600; }
.run-actions .status-message.error { @apply text-red-600; }

.console-output {
  @apply p-4 bg-gray-800 text-gray-100 rounded-md font-mono text-sm max-h-48 overflow-y-auto shadow-inner;
}

.console-output h4 {
  @apply text-cyan-400 mb-2;
}

.console-output pre {
  @apply m-0;
}

.react-flow__node {
  @apply p-3 rounded-md border border-gray-300 bg-white shadow-sm text-sm;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.react-flow__node.start { @apply bg-green-50 border-green-200; }
.react-flow__node.llm { @apply bg-blue-50 border-blue-200; }
.react-flow__node.branch { @apply bg-red-50 border-red-200; }
.react-flow__node.code { @apply bg-yellow-50 border-yellow-200; }
.react-flow__node.http { @apply bg-teal-50 border-teal-200; }
.react-flow__node.knowledge { @apply bg-purple-50 border-purple-200; }
.react-flow__node.end { @apply bg-gray-50 border-gray-200; }

.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg p-6 w-full max-w-md shadow-xl max-h-[80vh] overflow-y-auto;
  animation: slideIn 0.2s ease-out;
}

.api-modal {
  @apply bg-white rounded-lg p-6 w-full max-w-lg shadow-xl max-h-[80vh] overflow-y-auto;
  animation: slideIn 0.2s ease-out;
}

.kb-modal-content {
  @apply bg-white rounded-lg p-6 w-full max-w-3xl shadow-xl max-h-[80vh] flex flex-col;
  animation: slideIn 0.2s ease-out;
}

/* 新增样式，用于加宽的知识库模态框 */
.kb-modal-content.wide {
    @apply max-w-6xl; /* 从 3xl 增加到 6xl */
}

/* 新增自定义滚动条样式 (可选，但能提升体验) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 连线样式：默认粗细和鼠标悬停时变粗 */
.react-flow__edge-path {
  stroke-width: 2;
  transition: stroke-width 0.2s ease;
}

.react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 4;
}

/* Logo 样式 */
.logo-container {
  @apply p-4 bg-white border-b border-gray-200 flex items-center justify-center;
}

.logo-text {
  @apply text-2xl font-bold text-gray-800;
  font-family: 'Inter', sans-serif;
}

/* 自定义节点样式 */
.start-node, .llm-node, .branch-node, .code-node, .http-node, .end-node, .knowledge-node {
  padding: 0px;
  text-align: center;
  min-width: 150px;
}

/* 条件分支节点标签样式 */
.branch-label {
  @apply text-xs font-semibold text-gray-600;
  position: absolute;
  left: -30px; /* 将标签移到输出端点左侧 */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* 节点名称样式 */
.node-name {
  font-size: 16px;
  font-weight: bold;
}